<template>
  <div style="padding: 0px 20px">
    <div class="table-container" style="background: #fff">
      <div style="display: flex; justify-content: center; padding: 20px">
        <div style="display: flex; align-items: center; flex: 1">
          <el-row>
            <button :class="['menu-btn', tableKey == '' ? 'checkBtn' : '']" @click="filterDate(0)">全部</button>
            <button :class="['menu-btn', tableKey == '1' ? 'checkBtn' : '']" @click="filterDate(1)">2025</button>
            <button :class="['menu-btn', tableKey == '2' ? 'checkBtn' : '']" @click="filterDate(2)">2024</button>
            <button :class="['menu-btn', tableKey == '3' ? 'checkBtn' : '']" @click="filterDate(3)">2023</button>
          </el-row>
        </div>

        <div style="display: flex; justify-content: right; align-items: center; flex: 1">
          <el-form
            ref="form"
            :inline="true"
            :model="queryForm"
            @submit.native.prevent
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-select v-model="sortType" placeholder="部门" style="width: 160px; margin-right: 10px" @change="sortData($event, index)">
              <el-option label="一部" value="一部"></el-option>
              <el-option label="二部" value="二部"></el-option>
              <el-option label="三部" value="三部"></el-option>
              <el-option label="四部" value="四部"></el-option>
              <el-option label="五部" value="五部"></el-option>
              <el-option label="研发部" value="研发部"></el-option>
            </el-select>
            <el-input v-model="queryForm.title" placeholder="项目名称/费用号" style="width: 200px" />
          </el-form>
        </div>
      </div>
      <div style="padding: 20px">
        <el-row :gutter="20">
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
            <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备1</span>
                </div>
                <div></div>
              </el-card>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'

  import { getProjectList } from '@/api/wordOrder'

  export default {
    name: 'project',
    filters: {},
    components: {
      VabChart,
    },
    data() {
      return {
        filterData: {
          day: '',
          week: '',
          month: '',
          year: '',
        },
        tableKey: '',
        sortType: '',
        fileList: [],
        imgShow: true,
        list: [],
        imageList: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
        optionMonth: {
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
            },
          ],
        },
      }
    },
    computed: {
      height() {
        // return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      filterDate(type) {
        this.tableKey = type
        if (type == 0) {
          this.fetchData()
        }
      },
      openDetails(nodeData) {
        this.$router.push({ path: '/alarmStatistics/alarmReport', query: { id: nodeData.id } })
      },
      randomRgb() {
        let R = Math.floor(Math.random() * 130 + 110)
        let G = Math.floor(Math.random() * 130 + 110)
        let B = Math.floor(Math.random() * 130 + 110)
        console.log(R, G, B)
        if (R == 255 && G == 255 && B == 255) {
          return {
            background: 'rgb(' + R + ',' + G + ',' + B + ')',
            color: 'black',
          }
        }
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ')',
        }
      },
      handleShow(data) {
        this.$refs['vabUpload'].handleShow(data)
      },
      sortData(value, index) {
        let type = ''
        switch (value) {
          case '0':
            type = 'sbNum'
            break
          case '1':
            type = 'totalProNum'
            break
          case '2':
            type = 'totalNgNum'
            break
          case '3':
            type = 'okPer'
            break
          case '4':
            type = 'AgPer'
            break
          case '5':
            type = 'BgPer'
            break
          case '6':
            type = 'CgPer'
            break
          case '7':
            type = 'totalNgPer'
            break
          default:
            break
        }
        this.list.sort((a, b) => b[type] - a[type])
      },
      async fetchData() {
        const { data, total } = await getProjectList(this.queryForm)
        this.list = data
        this.total = total
        let _this = this
        this.list.forEach(function (item) {
          item.color = _this.randomRgb()
          item.sbNum = Math.floor(Math.random() * 200)
          item.totalProNum = Math.floor(Math.random() * 900) + 600
          item.totalNgNum = Math.floor(Math.random() * 300)
          item.okPer = (((item.totalProNum - item.totalNgNum) / item.totalProNum) * 100).toFixed(2)
          item.AgNum = Math.floor(Math.random() * 100) + 100
          item.BgNum = Math.floor(Math.random() * 100) + 100
          item.CgNum = Math.floor(Math.random() * 100) + 100
          item.AgPer = ((item.AgNum / item.totalProNum) * 100).toFixed(2)
          item.BgPer = ((item.BgNum / item.totalProNum) * 100).toFixed(2)
          item.CgPer = ((item.CgNum / item.totalProNum) * 100).toFixed(2)
          item.totalNgPer = (((item.AgNum + item.BgNum + item.CgNum) / item.totalProNum) * 100).toFixed(2)
        })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      // handleRemove(file, fileList) {
      //   console.log(file, fileList)
      // },
      // handlePreview(file) {
      //   console.log(file)
      // },
      // handleExceed(files, fileList) {
      //   this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      // },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`)
      // },
    },
  }
</script>
<style scoped>
  .ava-style {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
</style>
<style lang="scss" scoped>
  .menu-btn {
    padding: 5px 16px;
    margin-right: 20px;
    border-radius: 32px;
    color: #4e5969;
    border: 0px;
    background: #fff;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  // .content {
  //   margin: 20px 0px;
  // }
  /* 按钮悬浮颜色 */
  .menu-btn:hover {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .menu-btn:focus {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  /* 按钮点击颜色 */
  .menu-btn:active {
    background: #f2f3f5;
    border-color: #f2f3f5;
  }
  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
      .el-card__header {
        padding: 10px 12px;
      }
    }
  }
  .checkBtn {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
  }
</style>
